<template>
  <div class="app-container">
    <el-table
      id="myform"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="订单编号" align="center">
        <template slot-scope="scope">{{ scope.row.orderId }}</template>
      </el-table-column>

      <el-table-column label="用户" align="center">
        <template slot-scope="scope">{{ scope.row.userName }}</template>
      </el-table-column>
      <el-table-column label="订单总价" align="center">
        <template slot-scope="scope">{{ scope.row.sumPrice }}</template>
      </el-table-column>
      <el-table-column label="订单创建时间" align="center">
        <template slot-scope="scope">{{ scope.row.orderTime }}</template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleFind(scope.row.orderId)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import $ from "@/api/project";

  export default {
    data() {
      return {
        value: "",
        state: 0,
        list: [],
        val: "",
        roleId: "",
        userNumber: "",
        listLoading: true,
        options: [],
        roleList: [],
      };
    },
    created() {
      this.find();
    },
    methods: {
      find() {
        this.listLoading = true;
        $.findAllOrders().then(res => {
            console.log(res.data)
            this.list = res.data
            this.listLoading = false
          }
        );
      },
      handleFind(id){
        this.$router.push({
          path:"find",
          query:{id:id}
        })
      },
    }
  };
</script>
<style scoped>
  .button {
    padding-left: 1rem;
  }
</style>
